<template>
  <div class='app-container'>
    <div class='button-container'>
      <el-button class='filter-item' type='primary' @click='addcompany' icon='edit'>新增租户
      </el-button>
    </div>
    <div>

      <!-- 表格 -->
      <el-table ref="companyTable" :data="GridPageList"
                v-loading.lock="gridDataIsLoading"
                element-loading-text="数据加载中..." border fit highlight-current-row>

        <el-table-column align="center" label='序号' width="150">
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="租户关键字" width="200">
          <template slot-scope="scope">
            {{scope.row.zlcompanykey}}
          </template>
        </el-table-column>
        <el-table-column label="租户名称" width="200">
          <template slot-scope="scope">
            {{scope.row.companyname}}
          </template>
        </el-table-column>
        <el-table-column label="授权模块">
          <template slot-scope="scope">
            <template v-for="(moudle,index) in scope.row.moudles">
              <el-tag :key="index"
                      type='primary'>{{moudle.moudlename}}
              </el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button icon="edit" size="small" type="primary" @click="editcompany(scope.$index,scope.row)">编辑
            </el-button>
            <el-button v-if="scope.row.zlcompanykey!=='zillion'" icon="setting" size="small"
                       @click=openSetRoutesDialog(scope.row)>路由授权
            </el-button>
            <el-button v-if="scope.row.zlcompanykey!=='zillion'" icon="delete" type="danger" size="small"
                       @click="deletecompany(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div v-show="!gridDataIsLoading" class="pagination-container">
      <el-pagination @size-change="onPageSizeChanged" @current-change="onPageNoChanged"
                     :current-page.sync="paginationConfig.currentQueryPage"
                     :page-sizes="[10,20,30, 50]" :page-size="paginationConfig.selectedPageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="dataCount">
      </el-pagination>
    </div>
    <zl-company-dialog ref="companydialog" @onSubmit="onSubmit">
    </zl-company-dialog>

    <zl-routes-dialog ref="routesdialog" @onSubmit="handleSetRoutesSubmit"
                      :selectdRotes="selectdRotes"></zl-routes-dialog>
  </div>
</template>

<script>
  import routesSetDialog from '../routesSetDialog.vue';
  import companySetDialog from './companySetDialog.vue';

  export default {
    name: "companyset",
    data() {
      return {
        gridDataSource: [],
        // 当前分页数据开始index
        startIndex: 0,
        // 当前分页数据结束index
        endIndex: 0,
        currentSelectedRow: null,
        gridDataIsLoading: false,
        paginationConfig: {selectedPageSize: 10, currentQueryPage: 0},
        selectdRotes: []
      };
    },
    components: {
      "zl-company-dialog": companySetDialog,
      "zl-routes-dialog": routesSetDialog
    },
    methods: {
      /**
       * 刷新数据
       */
      refreshData() {
        this.gridDataIsLoading = true;
        this.$http
          .get("/OssBack/Compnay/GetAllCompanys")
          .then(response => {
            if (response.data.isSuccess) {
              this.gridDataSource = response.data.companys;
              this.paginationConfig.currentQueryPage = 1;
            }
            this.gridDataIsLoading = false;
            this.paginationConfig.currentQueryPage = 0;
          });
      },
      computeDataIndex(pageNo, pageSize) {
        this.startIndex = pageSize * (pageNo - 1) + 1;
        this.endIndex = this.startIndex + pageSize;
        console.log(this.startIndex);
        console.log(this.endIndex);
      },

      /**
       * 分页变化
       */
      onPageSizeChanged(size) {
        this.paginationConfig.selectedPageSize = size;
        this.computeDataIndex(this.paginationConfig.currentQueryPage, size);
      },
      onPageNoChanged(page) {
        this.paginationConfig.currentQueryPage = page;
        this.computeDataIndex(page, this.paginationConfig.selectedPageSize);
      },

      /**
       * 删除租户
       */
      deletecompany(index, row) {
        this.$http.delete("/OssBack/Compnay/RemoveCompany", {
          params: {
            companykey: row.zlcompanykey
          }
        }).then(response => {
          if (response.data.isSuccess) {
            this.gridDataSource.splice(index, 1);
            this.$message({
              message: '删除成功!',
              type: 'success'
            });
          }
        });
      },
      // 编辑租户
      editcompany(index, row) {
        this.$refs.companydialog.showDialog(row.zlcompanykey);
      },
      // 添加住户
      addcompany(index, row) {
        this.$refs.companydialog.showDialog("");
      },
      // 数据保存事件
      onSubmit(company) {
        let updateIndex = this.gridDataSource.findIndex((item) => {
          return item.zlcompanykey === company.zlcompanykey;
        });
        if (updateIndex === -1) {
          this.gridDataSource.push(company);
        } else {
          this.gridDataSource.splice(updateIndex, 1, company);
        }
        this.$message({
          message: '保存成功!',
          type: 'success'
        });
      },
      openSetRoutesDialog(row) {
        this.currentSelectedRow = row;
        this.$http.get('/OssBack/Compnay/GetCompanyRoutes', {
          params: {
            companykey: row.zlcompanykey
          }
        }).then((response) => {
          if (response.data.isSuccess) {
            this.selectdRotes.splice(0, this.selectdRotes.length);
            response.data.routes.forEach(x => {
              this.selectdRotes.push(x.path);
            });
            console.log(this.selectdRotes);
            this.$refs.routesdialog.showDialog(row.zlcompanykey);
          }
        });
      },

      /**
       * 绑定岗位路由
       */
      handleSetRoutesSubmit(roteslist) {
        this.$http.post('/OssBack/Compnay/SetCompanyRoutes', {
          routepaths: roteslist,
          companykey: this.currentSelectedRow.zlcompanykey
        }).then((response) => {
          if (response.data.isSuccess) {
            this.$message({
              message: '指定路由成功!',
              type: 'success'
            });
          }
        }).catch(() => {
          this.$message({
            message: '数据保存失败!',
            type: 'error'
          });
        });
      }
    },
    created() {
      this.refreshData();
    },
    computed: {
      GridPageList() {
        if (this.gridDataSource && this.gridDataSource.length > 0) {
          if (this.startIndex > 0 && this.endIndex > 0) {
            return this.gridDataSource.slice(
              this.startIndex - 1,
              this.endIndex - 1
            );
          } else {
            return [];
          }
        } else {
          return [];
        }
      },
      dataCount() {
        if (this.gridDataSource) {
          return this.gridDataSource.length;
        } else {
          return 0;
        }
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
</style>
